<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>TZ-追梦</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        #box{
            width: 600px;
            height: 400px;
            border: 1px solid black;
            margin: auto;
        }
        video{
            Object-fit:fill;
        }
        #tab{
            width: 600px;
            text-align: center;
            line-height: 35px;
            margin: 15px auto;
            font-size: 14px;

        }
        #tab ul{
            display: flex;
        }
        li{
            flex: 1;
            cursor: pointer;
            box-shadow:inset 0 0 8px rgba(0,0,0,0.8);
        }
        li.on{
            background: black;
            color: white;
        }
    </style>
</head>
<body>
    <div id="box">
        <video id="video" -autoplay Poster="bg.jpg" controls width="100%" height="100%" >
            <source src="http://vodcdn.video.taobao.com/oss/ali-video/63a7679bcb824cac8cee94501b95c3a2/1457684835/video.mp4">
            <source src="">
            <source src="">
            <source src="">
        </video>
    </div>
    <div id="tab">
        <ul>

            <li>播放</li>
            <li>暂停</li>
            <li>播放速度</li>
            <li>音量-</li>
            <li>音量+</li>
            <li>静音</li>
            <li>全屏</li>
            <li>当前时间</li>
            <li>总时间</li>
        </ul>
    </div>

    <script>
        var aLi = tab.querySelectorAll('li');
        var oVideo = document.querySelector('#video');
        var onOff = true;
        for( var i=0;i<aLi.length;i++ ){
            aLi[i].index = i;
            aLi[i].onclick = function () {
                for( var i=0;i<aLi.length;i++ ){
                    aLi[i].className = '';
                }
                this.className = 'on';

                switch ( this.index ){
                    case 0:
                        oVideo.play();
                        break;
                    case 1:
                        oVideo.pause();
                        break;
                    case 2:
                        onOff?oVideo.playbackRate+=10:oVideo.playbackRate=1;
                        onOff !=onOff;
                        break;
                    case 3:
                        oVideo.volume = 0.1;
                        break;
                    case 4:
                        oVideo.volume = 0.5;
                        break;
                    case 5:
                        oVideo.volume = 0;
                        break;
                    case 6:
                        oVideo.webkitRequestFullScreen();
                        break;
                    case 7:
                        this.innerHTML=oVideo.currentTime;
                        break;
                    case 8:
                        this.innerHTML = oVideo.duration;
                        break;
                }
            }
        }

    </script>
</body>
</html>






















